<script>
$(document).ready(function(){
    $("#comment-levelForm").ajaxForm({
        dataType:  'json',
        success: showResponse
    });

    function showResponse(res) {
        if (!res.success) {
            var message = '';
            $.each(res.error,function(i,v){
                $.each(v,function(ii,vv){
                      $("#comment-level-data #th-"+ii) .addClass('ui-state-error');
                        $.each(vv,function(iii,vvv){
                            message += $("#comment-level-data #th-"+ii).html()+': '+ vvv+ "\n";
                        });
                });
            });
           jAlert(message, '<?php echo $this->translate("checking errors")?>');
        }
        else{
            jAlert('',"<?php echo $this->translate('Successfully saved')?>");
            $("#tabs").tabs('load',2);
        }
    }

    function checkCommentLevelIsEmpty() {
        if ($("#comment-level-data input:[type='text']").length == 0)
            $("#commentLevelSaveBtn").attr('disabled','disabled');
        else
            $("#commentLevelSaveBtn").attr('disabled','');
    }

    $("#commentLevelSaveBtn").click(function(){
        $(".ui-state-error").removeClass('ui-state-error');
        $("#comment-levelForm").submit();
      });

    $(".deleteBtn").click(function(){
        if (confirm('<?php echo $this->translate("Are you sure want to delete ?")?>')) {
            var sn= $(this).attr('id').substr(4);
            var this_tr = $(this);
            $.getJSON('<?php echo $this->route("comment-level-delete")?>',{sn:sn},function(){
                this_tr.parents('tr').remove();
                checkCommentLevelIsEmpty();
             });
        }
      });

    $(".cancelBtn").live('click',function(){
         $(this).parents('tr').remove();
         checkCommentLevelIsEmpty();
      });

    $("#commentLevelAppendBtn").click(function(){
        $("#comment-level-data tbody").append('<tr><td><input type="text" size=16 name="new_LevelName[]" /></td>'+
                '<td><input type="button" class="cancelBtn" value="<?php echo $this->translate("cancel")?>" /></td></tr>');
        checkCommentLevelIsEmpty();
      });

    checkCommentLevelIsEmpty();
});
</script>
<div id="comment-level-data">
<form action="<?php echo $this->route('comment-level-save')?>" method="post"  id="comment-levelForm">
<div style="width:300px;text-align:right">
<input type="button"  id="commentLevelSaveBtn"  value="<?php echo $this->translate('save')?>" />
<input type="button"  id="commentLevelAppendBtn"  value="<?php echo $this->translate('append')?>" />
</div>
<table class="hor-minimalist-a" summary="score comment levellist" style="margin:5px;width:300px">
<thead>
<tr>
<th scope="col" id="th-name"><?php echo $this->translate('level name')?></th>
<th scope="col" ><?php echo $this->translate('action')?></th>
</tr></thead>
<tbody>
<?php foreach($this->data as $val):?>
<tr>
<?php if ($val['teacher_sn'] == 0):?>
<td><?php echo $val['name']?></td><td><?php echo $this->translate('default')?></td>
<?php else: ?>
<td>
<input type="text"  id="name-<?php echo $val['sn']?>" name="name[<?php echo $val['sn']?>]" value="<?php echo $val['name']?>"  size="16"/></td>
<td><input type="button" class="deleteBtn"  id="del-<?php echo $val['sn']?>" value="<?php echo $this->translate('delete')?>" /></td>
<?php endif?>
</tr>
<?php endforeach;?>
</tbody>
</table>
</form>
</div>